<template>
  <div
    class="range-input"
    :class="{'disabled': disabled}"
    :style="styleName"
    @mouseover="handleMouseover"
    @mouseout="handleMouseout"
  >
    <div
      class="range-input-box"
      :class="{'active': rangeInputFocus, 'error': svgType == 'error'}"
    >
      <div class="input-box">
        <input
          type="text"
          class="range-input"
          :disabled="disabled"
          :placeholder="placeholder"
          v-model="rangeInputs[0]"
          @input="handleInput(0)"
          @focus="handleFocus"
          @blur="handleBlur(0)"
          @change="handleChange"
        >
      </div>
      <div>{{centerText}}</div>
      <div class="input-box">
        <input
          type="text"
          class="range-input"
          :disabled="disabled"
          :placeholder="placeholder"
          v-model="rangeInputs[1]"
          @input="handleInput(1)"
          @focus="handleFocus"
          @blur="handleBlur(1)"
          @change="handleChange"
        >
      </div>
      <div
        class="el-icon-circle-close del"
        :class="{'opacity': delShow&&mouseShow}"
        @click="delShow && mouseShow && handleClear()"
      ></div>
      <div class="unit">
        {{unit}}
      </div>
    </div>
    <div class="errorMessage">{{errorMessage}}</div>
  </div>
</template>
<script>
export default {
  name: 'RangeInput',
  props: {
    /**
     * input
     * 整数 integer
     * 保留小数 number
     */
    type: {
      type: String,
      default: 'input'
    },
    width: { // 组件的宽度
      type: String,
      default: '256px'
    },
    placeholder: { // 输入框占位文本
      type: String,
      default: ''
    },
    value: { // 绑定值
      type: Array,
      default: function () {
        return []
      }
    },
    clearable: { // 是否支持清空
      type: Boolean,
      default: false
    },
    disabled: { // 是否禁用
      type: Boolean,
      default: false
    },
    centerText: { // 中间的文字
      type: String,
      default: ''
    },
    unit: { // 后边的单位
      type: String,
      default: ''
    },
    delShow: { // 是否可以删除
      type: Boolean,
      default: false
    },
    max: { // 数值最大值
      type: Number,
      default: 999999999
    },
    min: { // 数值最小值
      type: Number,
      default: -999999999
    },
    maxLength: {
      type: Number,
      default: 1000
    },
    precision: { // 保留小数位
      type: Number,
      default: 1000
    },
    sort: { // 两个值大小顺序 升序up
      type: String,
      default: ''
    },
    validateState: { // 表单验证
      type: Boolean,
      default: false
    },
    errorMessage: { // 表单验证提示内容
      type: String,
      default: ''
    },
  },
  data() {
    return {
      rangeInputFocus: false,
      rangeInputs: [...this.value],
      svgType: this.type,
      mouseShow: false,
    }
  },
  computed: {
    styleName() {
      return {
        width: this.width
      }
    },
  },
  methods: {
    handleValue(value) {

      if (this.type === 'integer') {
        // value = Number(value) + ''
        // console.log(value)
        if (/[^0-9]*/.test(value)) {
          value = value.replace(/[^0-9]*/g, '')
        }

        // // 最大数值
        // if (value !== '') {
        //   let maxNumber = this.max ? this.max : 99999999
        //   value = Number(value) > maxNumber ? maxNumber + '' : value
        // }

        // // 最小数值
        // if (value !== '') {
        //   let minNumber = this.min || this.min === 0 ? this.min : 0
        //   value = Number(value) < minNumber ? minNumber + '' : value
        // }
      } else if (this.type === 'number') {
        if (/[^0-9 | .]*/.test(value)) {
          value = value.replace(/[^0-9 | .]*/g, '')
        }
        let index = value.indexOf('.')
        // 不合法置空
        if (index === 0) {
          value = ''
        }
        // 没有小数点，去前置0
        if (index < 0) {
          value = Number(value) + ''
        }
        // 多余一个小数点保留整数
        if (value.split('.').length > 2) {
          value = value.split('.')[0]
        }
        let precision = this.precision || 1000
        // 保留两位小数
        if (index > 0) {
          value = value.substring(0, index + precision + 1)
        }
        // // 最大数值
        // if (value !== '') {
        //   let max = this.max ? this.max : 999999999
        //   value = Number(value) > max ? max + '' : value
        // }
        // // 最小数值
        // if (value !== '') {
        //   let min = this.min || 0
        //   value = Number(value) < min ? min + '' : value
        // }

      } else if (this.type === 'number') {
        if (/[^0-9 | .]*/.test(value)) {
          value = value.replace(/[^0-9 | .]*/g, '')
        }

        let index = value.indexOf('.')
        // 不合法置空
        if (index === 0) {
          value = ''
        }
        // 没有小数点，去前置0
        if (index < 0) {
          value = Number(value) + ''
        }
        // 多余一个小数点保留整数
        if (value.split('.').length > 2) {
          value = value.split('.')[0]
        }

      }
      let maxLength = this.maxLength ? this.maxLength : value.length
      value = value.substring(0, maxLength)
      return value
    },
    handleInput(index) {
      let val = this.rangeInputs[index] || ''
      val = this.handleValue(val)
      this.rangeInputs[index] = val === '' ? '' : Number(val)
      this.$emit('input', [...this.rangeInputs]);
    },
    handleFocus(event) {
      this.rangeInputFocus = true;
      this.$emit('focus', event);
    },
    handleBlur(index) {
      this.rangeInputFocus = false;
      if (['number', 'integer'].includes(this.type)) {

        // 最大数值
        if (this.rangeInputs[index] !== '') {
          let maxNumber = this.max ? this.max : 99999999
          this.rangeInputs[index] = Number(this.rangeInputs[index]) > maxNumber ? maxNumber + '' : this.rangeInputs[index]
        }

        // 最小数值
        if (this.rangeInputs[index] !== '') {
          let minNumber = this.min || this.min === 0 ? this.min : 0
          this.rangeInputs[index] = Number(this.rangeInputs[index]) < minNumber ? minNumber + '' : this.rangeInputs[index]
        }


        if (this.sort == 'up') {
          let rangeInputs = JSON.parse(JSON.stringify(this.rangeInputs))
          let isIndex0 = this.rangeInputs[0] !== null && this.rangeInputs[0] !== undefined && this.rangeInputs[0] !== ''
          let isIndex1 = this.rangeInputs[1] !== null && this.rangeInputs[1] !== undefined && this.rangeInputs[1] !== ''
          if (index === 0 && isIndex0) {
            if (isIndex1 && this.rangeInputs[0] > this.rangeInputs[1]) {
              rangeInputs[0] = this.rangeInputs[1]
            }
          }
          if (index === 1 && isIndex1) {
            if (isIndex0 && this.rangeInputs[0] > this.rangeInputs[1]) {
              rangeInputs[1] = this.rangeInputs[0]
            }
          }
          this.rangeInputs = rangeInputs
          this.$emit('input', [...this.rangeInputs]);


        }
      }
      this.$emit('blur', this.rangeInputs);
    },
    handleChange() {
      this.$emit('change', [...this.rangeInputs]);
    },
    handleMouseover() {
      if (this.value && this.value.length && this.value[0] != '' && this.value[1] != '') {
        this.mouseShow = true
      }
      // if (!this.validateState) {
      //   this.svgType = 'error';
      // } else {
      //   this.rangeInputs && this.rangeInputs.length && this.clearable ? this.svgType = 'del' : this.svgType = this.type;
      // }
    },
    handleMouseout() {
      this.mouseShow = false
      // if (!this.validateState) {
      //   this.svgType = 'error';
      // } else {
      //   this.svgType = this.type;
      // }
    },
    handleClear() {
      this.rangeInputs = [];
      this.$emit('input', []);
    }
  }
};
</script>
<style lang="scss" scoped>
%highlight {
  position: absolute;
  bottom: 0;
  left: 0;
  content: '';
  width: 100%;
  height: 1px;
}
.range-input {
  .range-input-box {
    position: relative;
    display: flex;
    align-items: center;
    height: 32px;
    line-height: 32px;
    border-radius: unset;
    background: #f4f4f4;
    overflow: hidden;
    font-size: 16px;
    color: #333;
    &.active:after {
      background: #fff;
    }
    &.error:after {
      background: #fff;
    }
    .input-box {
      width: calc((100% - 6px - 18px -6px) / 2);
      .range-input {
        width: 100%;
        padding: 0 10px 0 15px;
        height: 32px;
        line-height: 32px;
        box-sizing: border-box;
        background: transparent;
        color: #333;
        &::-webkit-input-placeholder {
          color: #c0c4cc;
        }
        &::-moz-placeholder {
          color: #c0c4cc;
        }
      }
    }
    .range-input-divider {
      content: '';
      width: 6px;
      height: 1px;
      background: #fff;
    }
  }
  &.disabled {
    .range-input-box {
      cursor: not-allowed;
      // color: #c0c4cc;
      // .range-input {
      //   color: #c0c4cc;
      // }
    }
  }
}
.unit {
  padding: 0 10px;
  background-color: #f4f4f4;
  border-left: 1px solid #dcdfe6;
  word-break: keep-all;
}
.del {
  color: #c0c4cc;
  padding: 0 5px;
  opacity: 0;
}
.opacity {
  opacity: 1;
}
.errorMessage {
  color: #f56c6c;
  font-size: 12px;
  line-height: 1;
  padding-top: 4px;
  position: absolute;
  top: 100%;
  left: 0;
  padding-top: 2px;
}
</style>